import {Button, Card, Col, Form, Input, message, Row, Spin} from "antd";
import {Component} from "react";
import {connect} from "dva";
import APP from "@/components/Tool/BaseAPP";
import React from "react";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {FormattedMessage} from "umi/locale";

@connect(({appConfigModel}) => ({
    appConfigModel
}))
@Form.create()
class AppConfig extends Component {

    state = {
        loading: false,
        editData: {}
    };

    saveData = (e) => {
        e.preventDefault();
        const that = this;
        const { dispatch, form } = that.props;
        form.validateFields((err, values) => {
            if (err) return;
            APP.validNilParams(values);
            request(values);
        });

        function request(params) {
            APP.loading(that);
            dispatch({
                type: "appConfigModel/saveData",
                payload: params,
                callback: function (data) {
                    APP.closeLoading(that);
                    if (data.success) {
                        message.success("保存成功！");
                        that.getData();
                    } else {
                        message.error(data.msg);
                    }
                }
            });
        }
    };

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        let that = this;
        const {dispatch} = that.props;
        APP.loading(that);
        dispatch({
            type: "appConfigModel/getData",
            callback: function (data) {
                APP.closeLoading(that);
                if (data.success && data.datas) {
                    that.setState({
                        editData: data.datas
                    });
                }
            }
        });
    };

    render() {
        const {
            loading,
            editData
        } = this.state;
        const {form} = this.props;
        const {getFieldDecorator} = form;
        const formItemLayout = {
            style: {
                margin: '0px',
                width: '500px'
            },
        };
        const rowStyle = {
            style: {
                'text-align': 'center'
            }
        };
        return (
            <Spin spinning={loading}>
                <PageHeaderWrapper title={<FormattedMessage id="menu.settings.appConfig"/>}>
                    <Card>
                        <Form layout="inline" onSubmit={this.saveData} style={{maxWidth: 900, margin: "0 auto"}} labelCol={{span: 8}} wrapperCol={{span: 16}}>
                            {getFieldDecorator('id', {initialValue: editData.id})(<Input hidden={true}/>)}
                            <Row {...rowStyle}>
                                <Form.Item label="版本号" {...formItemLayout}>
                                    {
                                        getFieldDecorator('versionNum', {
                                            initialValue: editData.versionNum,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '请输入版本号！',
                                                },
                                            ],
                                        })(<Input placeholder={"请输入版本号"} allowClear={true}/>)
                                    }
                                </Form.Item>
                            </Row>
                            <Row {...rowStyle}>
                                <Form.Item label="安全码" {...formItemLayout}>
                                    {
                                        getFieldDecorator('safeCode', {
                                            initialValue: editData.safeCode,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '请输入安全码！',
                                                },
                                            ],
                                        })(<Input placeholder={"请输入安全码"} allowClear={true}/>)
                                    }
                                </Form.Item>
                            </Row>
                            <Row {...rowStyle}>
                                <Form.Item label="心跳间隔" {...formItemLayout}>
                                    {
                                        getFieldDecorator('minutes', {
                                            initialValue: APP.changeIsNilVal(editData.minutes, 5),
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '请输入心跳间隔！',
                                                },
                                            ],
                                        })(<Input placeholder={"请输入心跳间隔"} allowClear={true} addonAfter="分" type={'number'} />)
                                    }
                                </Form.Item>
                            </Row>
                            <Row {...rowStyle}>
                                <Form.Item label="API地址" {...formItemLayout}>
                                    {
                                        getFieldDecorator('apiUrl', {
                                            initialValue: editData.apiUrl,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '请输入API地址！',
                                                },
                                            ],
                                        })(<Input placeholder={"请输入API地址"} allowClear={true} />)
                                    }
                                </Form.Item>
                            </Row>
                            <Row {...rowStyle}>
                                <Form.Item label="广告存储路径" {...formItemLayout}>
                                    {
                                        getFieldDecorator('adPath', {
                                            initialValue: editData.adPath,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '请输入广告存储路径！',
                                                },
                                            ],
                                        })(<Input placeholder={"请输入广告存储路径"} allowClear={true} />)
                                    }
                                </Form.Item>
                            </Row>
                            <Row {...rowStyle}>
                                <Form.Item label="备注" {...formItemLayout}>
                                    {
                                        getFieldDecorator('remark', {
                                            initialValue: editData.remark,
                                        })(
                                            <Input.TextArea
                                                placeholder="请输入备注"
                                                className="custom"
                                                style={{
                                                    height: 150,
                                                    width: "100%",
                                                    resize: 'none'
                                                }}
                                            />
                                        )
                                    }
                                </Form.Item>
                            </Row>
                            <Row {...rowStyle}>
                                <Button type="primary" htmlType="submit">
                                    保存
                                </Button>
                            </Row>
                        </Form>
                    </Card>
                </PageHeaderWrapper>
            </Spin>
        )
    }
}

export default AppConfig;
